<template>
  <div id="Cds">
    <ul class="cdss1">
      <li>
        <button class="cdss2" @click="xinz">新增</button>
        <button @click="Csc">删除</button>
        <button>修改</button>
        <button @click="Cfb">发布</button>
      </li>
    </ul>
    <h1 class="cdss4">大事记登记</h1>
    <table class="cdss3">
      <thead>
        <tr class="cdss5">
          <td class="cdss6">序号</td>
          <td class="cdss6">日期</td>
          <td class="cdss6">标题</td>
          <td class="cdss6">内容</td>
          <td class="cdss6" v-if="cz">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item1, index) in dsxx" :key="index" class="cdss5">
          <th v-for="item2 in item1" :key="item2" class="cdss6">{{ item2 }}</th>
          <th class="cpp" v-if="cz" @click="Cremove">删除</th>
        </tr>
      </tbody>
    </table>
    <ul>
      <li class="cdss9">
        <button @click="mstop">上一页</button>
        <button>下一页</button>
      </li>
    </ul>
    <div id="Cds2" v-if="cdss8">
      <h2>新增大事记</h2>
      <ul>
        <li>
          日期：
          <input type="text" v-model="sxx.rq" />
        </li>
        <li>
          标题：
          <input type="text" v-model="sxx.bt" />
        </li>
        <li>
          内容：
          <input type="text" v-model="sxx.nr" />
        </li>
        <li class="cdss7">
          <button @click="Cbc">确定</button>
          <button @click="Cback">返回</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Cdsj",
  methods: {
    xinz() {
      this.cdss8 = true;
    },
    Csc() {
      this.cz = true;
    },
    Cback() {
      this.cdss8 = false;
    },
    // 保存数据
    Cbc() {
      this.cdss8 = false;
      let sx = { xh: "", rq: "", bt: "", nr: "" };
      sx = this.sxx;
      sx.xh = Number(this.dsxx.length) + 1;
      this.dsxx[this.dsxx.length + 1] = sx;
    },
    Cfb() {
      alert("发布成功");
    },
    Cremove(index) {
      this.dsxx.splice(index, 1);
    },
    mstop() {
      this.selectPage = this.selectPage - 1;
      if (this.selectPage <= 1) {
        this.selectPage = 1;
        alert("当前已是第一页");
      } else {
        this.query(this.selectPage);
      }
    },
    //下一页
    msbottom() {
      this.selectPage = this.selectPage + 1;
      if (this.selectPage >= this.pageCount) {
        alert("当前最后一页");
      } else {
        this.query(this.selectPage);
      }
    },
    query(num) {
      let historyPagevo = {};
      //需要获取的数据条数
      historyPagevo["pageSize"] = 2;
      // 需要传的参数
      historyPagevo["entyVo"] = { zylmiputIdval: "" };
      historyPagevo["selectPage"] = num;
    },
  },
  computed: {},
  data() {
    return {
      Cxh: "",
      Crq: "",
      Cbt: "",
      Cnr: "",
      pageData: "",
      // 总页数
      pageCount: "",
      // 当前页码
      pageNum: "",
      //当前是第一页
      selectPage: 1,
      cz: false,
      cdss8: false,
      dsxx: [
        { xh: "1", rq: "2020-1-1", bt: "招聘", nr: "发布招聘信息" },
        { xh: "2", rq: "2020-1-1", bt: "招聘", nr: "发布招聘信息" },
        { xh: "3", rq: "2020-1-1", bt: "招聘", nr: "发布招聘信息" },
      ],
      sxx: { xh: "", rq: "", bt: "", nr: "" },
      cds1: true,
    };
  },
};
</script>
<style scoped>
#Cds {
  background-color: #dfdbdb;
  width: 1050px;
  height: 500px;
}
.cdss1 li > button {
  margin-left: 60px;
  width: 49px;
  height: 35px;
}
.cdss1 li > .cdss2 {
  margin-left: 200px;
}
.cdss3 {
  border: 1px soild rgba(204, 204, 192, 0);
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}
.cdss4 {
  text-align: center;
}
.cdss5,
.cdss6,
.cpp {
  padding: 8px 16px;
  border: 1px solid red;
  text-align: center;
}
.cdss6,
.cpp {
  color: rgb(152, 152, 231);
  font-weight: 600;
  font-size: 18px;
  height: 45px;
  line-height: 45px;
  background-color: #f6f6f6;
}
.cpp {
  cursor: pointer;
}
#Cds2 {
  background-color: aquamarine;
  position: relative;
  top: -330px;
  left: 30px;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}
#Cds2 > h2 {
  text-align: center;
  font-size: 24px;
}
#Cds2 ul > li {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 200px;
  float: left;
  line-height: 29px;
  font-size: 22px;
}
.cdss7 > button {
  margin-left: 80px;
}
.cdss9 {
  color: rgb(6, 124, 124);
  margin-left: 500px;
}
.cdss9 > button {
  width: 75px;
  height: 35px;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: 560;
  font-size: 17px;
}
</style>
